<template>
  <div>
    <el-card  shadow='never'
             :style="{width:`${(tableWidth*2+tableInterval+40)*zoom}px`,height:`${(tableHeight+122)*zoom}px`}" style="margin-left: 12px">
      <el-button size="mini" style="float: right;margin-right: 10px" @click="print">
        <svg-icon style="margin-right: 3px;" icon-class="import"/>
        打印
      </el-button>
      <div :show-border="showBorder" id="printDom" class="table-box" :style="{width:`${(tableWidth*2+tableInterval)}px`,height:`${tableHeight+60}px`,zoom: zoom}">
        <div v-if="isShow" :style="{width:`${tableWidth}px`}" style="float:left;text-align: center;">租用房屋情况</div>
        <div v-if="isShow" :style="{width:`${tableWidth}px`,marginLeft: `${tableInterval}px`}" style="float:left;text-align: center;">
          年检签章
        </div>
        <el-table
            border
            :row-style='rowStyle'
            size="mini"
            :data="tableData"
            :span-method="arraySpanMethod"
            row-key="id"
            :style="{width:`${tableWidth}px`}"
            style="float:left;font-size: 10px;"
            :height="tableHeight"
            :show-header='false'>
          <el-table-column prop="col1" align="center" :width="cellWidth*widthBl">
            <template v-slot="{row,$index}">
              <span style="float:left;line-height:1;" :style="{width:$index===7?`${cellWidth*1}px`:'auto',zoom: tableClear.includes(`${$index},1`)?fontHeaderZoom:fontContentZoom}">{{row.col1}}</span>
              <span v-if="$index===7&&isShow" :style="{float:'right',width:`${cellWidth*0.5}px`,lineHeight:'1'}">%</span>
            </template>
          </el-table-column>
          <el-table-column prop="col2" align="center" :width="cellWidth*widthBl">
            <template v-slot="{row,$index}">
              <span style="float:left;line-height:1;" :style="{zoom: tableClear.includes(`${$index},2`)?fontHeaderZoom:fontContentZoom}">{{row.col2}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="col3" align="center" :width="cellWidth*widthBl">
            <template v-slot="{row,$index}">
              <span style="float:left;line-height:1;" :style="{width:$index===7?`${cellWidth*1}px`:'auto',zoom: tableClear.includes(`${$index},3`)?fontHeaderZoom:fontContentZoom}">{{row.col3}}</span>
              <span v-if="$index===7&&isShow" :style="{float:'right',width:`${cellWidth*0.5}px`,lineHeight:'1'}">%</span>
            </template>
          </el-table-column>
          <el-table-column prop="col4" align="center" :width="cellWidth*widthBl">
            <template v-slot="{row,$index}">
              <span style="float:left;line-height:1;"  :style="{zoom: tableClear.includes(`${$index},4`)?fontHeaderZoom:fontContentZoom}">{{row.col4}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="col5" align="center" :width="cellWidth*widthBl">
            <template v-slot="{row,$index}">
              <span style="float:left;line-height:1;"  :style="{width:$index===7?`${cellWidth*1}px`:'auto',zoom: tableClear.includes(`${$index},5`)?fontHeaderZoom:fontContentZoom}">{{row.col5}}</span>
              <span  v-if="$index===7&&isShow" :style="{float:'right',width:`${cellWidth*0.5}px`,lineHeight:'1'}">%</span>
            </template>
          </el-table-column>
          <el-table-column prop="col6" align="center" :width="cellWidth*widthBl">
            <template v-slot="{row,$index}">
              <span style="float:left;line-height:1;"  :style="{zoom: tableClear.includes(`${$index},6`)?fontHeaderZoom:fontContentZoom}">{{row.col6}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="col7" align="center" :width="cellWidth*widthBl">
            <template v-slot="{row,$index}">
              <span style="float:left;line-height:1;"  :style="{zoom: tableClear.includes(`${$index},7`)?fontHeaderZoom:fontContentZoom}">{{row.col7}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="col8" align="center" :width="cellWidth*widthBl">
            <template v-slot="{row,$index}">
              <span  style="float:left;line-height:1;" :style="{zoom: tableClear.includes(`${$index},8`)?fontHeaderZoom:fontContentZoom}">{{row.col8}}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-table
            border
            :row-style='rowStyle2'
            size="mini"
            :data="tableData1"
            :span-method="arraySpanMethod2"
            row-key="id"
            :style="{width:`${tableWidth}px`,marginLeft:`${tableInterval}px`}"
            style="float:left;font-size: 10px"
            :height="tableHeight"
            :show-header='false'>
          <el-table-column prop="col1" align="center" :width="cellWidth">
            <template v-slot="{row,$index}">
              <template v-if="$index===6">
                <div v-if="isShow" :style="{textAlign:'left',position:'absolute',float:'left',marginTop:`-${cellWidth*1.5}px`}">记事：{{row.col1}}</div>
                <div :style="{textAlign:'left',position:'absolute',float:'left',marginTop:`-${cellWidth*1}px`}" v-else >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{row.col1}}</div>
              </template>
              <span v-else-if="Array.from([0,2,4]).includes($index)&&isShow"
                    :style="{float:'left',marginBottom:'20px'}">二⚪二</span>
              <template v-else-if="$index===10">
                <span v-if="isShow"   style="float:left;margin-left: 50px;position: relative">发证日期：</span>
                      <span style="float: right;margin-right:42px;position: relative;margin-top: 10px" >
                        <span :style="{zoom: fontContentZoom}">{{row.col1.split('-')[0]}}</span>
                        <span  v-if="isShow">年</span>
                        <span v-else>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                       <span :style="{zoom: fontContentZoom}"> {{row.col1.split('-')[1]}}</span>
                        <span v-if="isShow">月</span>
                        <span v-else>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span :style="{zoom: fontContentZoom}">{{row.col1.split('-')[2]}}</span>
                        <span v-if="isShow">日</span>
                        <span v-else>&nbsp;&nbsp;</span>
                      </span>
              </template>
              <template v-else>
                <span  v-if="isShow" style="float:left;margin-left: 60px">签发人：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{row.col1}}</span>
                <span  v-else  style="float:left;margin-left: 60px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{row.col1}}</span>
              </template>

            </template>
          </el-table-column>
          <el-table-column prop="col2" align="center" :width="cellWidth*widthBl">
          </el-table-column>
          <el-table-column prop="col3" align="center" :width="cellWidth*widthBl">
          </el-table-column>
          <el-table-column prop="col4" align="center" :width="cellWidth*widthBl">
          </el-table-column>
          <el-table-column prop="col5" align="center" :width="cellWidth*widthBl">
            <template v-slot="{row,$index}">
              <span v-if="Array.from([0,2,4]).includes($index)&&isShow" :style="{float:'left',marginBottom:'20px'}">二⚪二</span>
            </template>
          </el-table-column>
          <el-table-column prop="col6" align="center" :width="cellWidth*widthBl">
          </el-table-column>
          <el-table-column prop="col7" align="center" :width="cellWidth*widthBl">
          </el-table-column>
          <el-table-column prop="col8" align="center" :width="cellWidth*widthBl">
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import Print from "@/util/print";
const fontContentZoom = 0.85//
const fontHeaderZoom = 1.2
const widthBl = 1.02
const cellWidth = 50//单元格的宽高
const tableInterval = 125 //两个表格间距
const zoom = 0.80
const height2 = cellWidth * 1.5//第二行高度
export default {
  name: "demo3",
  data() {
    return {
      fontContentZoom:fontContentZoom,
      fontHeaderZoom:fontHeaderZoom,
      widthBl:widthBl,
      zoom:zoom,
      isShow:true,
      tableData:[],
      tableData1: [],
      cellWidth: cellWidth,
      height2: height2,
      tableWidth: cellWidth*widthBl * 8 ,
      tableInterval: tableInterval,
      tableHeight: cellWidth * 10 + height2 ,
      infoVo: {
        number: '0,2',//编号
        company: '0,7',//所属公司
        tenant: '1,2',//承租单位
        purpose: '3,1',//用途
        header: '3,3',//负责人
        architecturalYears: '3,5',//建筑年代
        houseStructure: '3,7',//房屋结构
        block: '5,1',//方块
        buildingNo: '5,2',//栋号
        householdNo: '5,3',//户号
        district :'5,4',//区
        street:'5,5',//街
        road:'5,6',//路
        part:'5,7',//段
        houseNo:'5,8',//号
        environmentalRate:'7,1',//环境率
        vibrationRate :'7,3',//震动率
        corrosionRate:'7,5',//腐蚀率
        builtUpArea:'7,7',//建筑面积
        rentedArea:'9,1',//计租面积
        rentUnitPrice:'9,3',//租金单价
        basicMonthlyRent:'9,5',//基本月租
        monthlyRentTotal:'9,7',//月租合计
        rentedArea1:'10,1',//计租面积
        rentUnitPrice1:'10,3',//租金单价
        basicMonthlyRent1:'10,5',//基本月租
        monthlyRentTotal1:'10,7',//月租合计
      },
      info: {
        number: '',//编号
        company: '',//所属公司
        tenant: '',//承租单位
        purpose: '',//用途
        header: '',//负责人
        architecturalYears: '',//建筑年代
        houseStructure: '',//房屋结构
        block: '',//方块
        buildingNo: '',//栋号
        householdNo: '',//户号
        district :'',//区
        street:'',//街
        road:'',//路
        part:'',//段
        houseNo:'',//号
        environmentalRate:'',//环境率
        vibrationRate :'',//震动率
        corrosionRate:'',//腐蚀率
        builtUpArea:'',//建筑面积
        rentedArea:'',//计租面积
        rentUnitPrice:'',//租金单价
        basicMonthlyRent:'',//基本月租
        monthlyRentTotal:'',//月租合计
        rentedArea1:'',//计租面积
        rentUnitPrice1:'',//租金单价
        basicMonthlyRent1:'',//基本月租
        monthlyRentTotal1:'',//月租合计
      },
      info1:{
        num1:'',
        num2:'',
        num3:'',
        num4:'',
        num5:'',
        num6:'',
        record:'',//记事
        issuer:'',//签发人
        date:''
      },
      info1Vo:{
        num1:'0,2',
        num2:'2,2',
        num3:'4,2',
        num4:'0,6',
        num5:'2,6',
        num6:'4,6',
        record:'6,1',//记事
        issuer:'9,1',//签发人
        date:'10,1'
      }
    }
  },
  computed:{
    showBorder(){
      return this.isShow?'showBorder':'noShowBorder'
    }
  },
  methods: {
    print() {
      const srcInfo = this.clearAll()
      this.$nextTick().then(()=>{
        let el = document.getElementById('printDom')
        Print(el).toPrint()
        this.tableData = srcInfo
        this.isShow = true
      })
    },
    clearAll(){
      this.isShow = false
      const info = JSON.parse(JSON.stringify(this.tableData))
      this.tableClear.forEach(item=>{
        const [rowIndex,col] = item.split(',')
        this.tableData[rowIndex][`col${col}`] = ''
      })
      return info
    },
    rowStyle({row, rowIndex}) {
      const style = {}
      if (rowIndex === 1) {
        style.height = `${this.height2}px`
      } else {
        style.height = `${this.cellWidth}px`
      }
      return style
    },
    rowStyle2({row, rowIndex}) {
      const style = {}
      if (rowIndex === 6) {
        style.height = `${this.height2}px`
      } else {
        style.height = `${this.cellWidth}px`
      }
      return style
    },
    arraySpanMethod2({rowIndex, columnIndex}) {
      const belongH21 = ['0,0', '0,4', '2,0', '2,4', '4,0', '4,4']
      const belongH23 = ['0,1', '0,5', '2,1', '2,5', '4,1', '4,5']
      const belongH18 = ['9,0', '10,0']
      const belongH38 = ['6,0']
      const val = `${rowIndex},${columnIndex}`
      if (belongH21.includes(val)) {
        return [2, 1]
      } else if (belongH23.includes(val)) {
        return [2, 3]
      } else if (belongH18.includes(val)) {
        return [1, 8]
      } else if (belongH38.includes(val)) {
        return [3, 8]
      } else {
        return [0, 0]
      }
    },
    arraySpanMethod({rowIndex, columnIndex}) {
      const belongH11 = [`0,0`, '1,0']
      const belongH12 = ['0,4', '0,6']
      const belongH13 = ['0,1']
      const belongH17 = ['1,1']
      for (let i = 0; i <= 7; i++) {
        belongH11.push(`4,${i}`, `5,${i}`)
      }
      Array.from([2, 3, 6, 7, 8, 9, 10]).forEach(rowIndex => {
        Array.from([0, 2, 4, 6]).forEach(columnIndex => {
          belongH12.push(`${rowIndex},${columnIndex}`)
        })
      })
      const val = `${rowIndex},${columnIndex}`
      if (belongH11.includes(val)) {
        return [1, 1]
      } else if (belongH12.includes(val)) {
        return [1, 2]
      } else if (belongH13.includes(val)) {
        return [1, 3]
      } else if (belongH17.includes(val)) {
        return [1, 7]
      } else {
        return [0, 0]
      }
    },
    initTable1() {
      this.tableData1.push({col1: '', col2: '', col3: '', col4: '', col5: '', col6: '', col7: '', col8: ''})
      this.tableData1.push({col1: '', col2: '', col3: '', col4: '', col5: '', col6: '', col7: '', col8: ''})
      this.tableData1.push({col1: '', col2: '', col3: '', col4: '', col5: '', col6: '', col7: '', col8: ''})
      this.tableData1.push({col1: '', col2: '', col3: '', col4: '', col5: '', col6: '', col7: '', col8: ''})
      this.tableData1.push({col1: '', col2: '', col3: '', col4: '', col5: '', col6: '', col7: '', col8: ''})
      this.tableData1.push({col1: '', col2: '', col3: '', col4: '', col5: '', col6: '', col7: '', col8: ''})
      this.tableData1.push({col1: '', col2: '', col3: '', col4: '', col5: '', col6: '', col7: '', col8: ''})
      this.tableData1.push({col1: '', col2: '', col3: '', col4: '', col5: '', col6: '', col7: '', col8: ''})
      this.tableData1.push({col1: '', col2: '', col3: '', col4: '', col5: '', col6: '', col7: '', col8: ''})
      this.tableData1.push({col1: '', col2: '', col3: '', col4: '', col5: '', col6: '', col7: '', col8: ''})
      this.tableData1.push({col1: '', col2: '', col3: '', col4: '', col5: '', col6: '', col7: '', col8: ''})
    },
    initTable() {
      this.tableData.push({col1: '编号', col2: '', col3: '', col4: '', col5: '所属公司', col6: '', col7: '', col8: ''})
      this.tableData.push({col1: '承租单位', col2: '', col3: '', col4: '', col5: '', col6: '', col7: '', col8: ''})
      this.tableData.push({
        col1: '用途',
        col2: '',
        col3: '负责人',
        col4: '',
        col5: '建筑年代',
        col6: '',
        col7: '房屋结构',
        col8: ''
      })
      this.tableData.push({col1: '', col2: '', col3: '', col4: '', col5: '', col6: '', col7: '', col8: ''})
      this.tableData.push({
        col1: '方块',
        col2: '栋号',
        col3: '户号',
        col4: '区',
        col5: '街',
        col6: '路',
        col7: '段',
        col8: '号'
      })
      this.tableData.push({col1: '', col2: '', col3: '', col4: '', col5: '', col6: '', col7: '', col8: ''})
      this.tableData.push({
        col1: '环境率',
        col2: '',
        col3: '震动率',
        col4: '',
        col5: '腐蚀率',
        col6: '',
        col7: '建筑面积',
        col8: ''
      })
      this.tableData.push({col1: '', col2: '', col3: '', col4: '', col5: ``, col6: '', col7: '', col8: ''})
      this.tableData.push({
        col1: '计租面积',
        col2: '',
        col3: '租金单价',
        col4: '',
        col5: '基本月租',
        col6: '',
        col7: '月租合计',
        col8: ''
      })
      this.tableData.push({col1: '', col2: '', col3: '', col4: '', col5: '', col6: '', col7: '', col8: ''})
      this.tableData.push({col1: '', col2: '', col3: '', col4: '', col5: '', col6: '', col7: '', col8: ''})
    },
    initInfo(){
      const {infoVo,tableData,info1Vo,tableData1} = this
      this.info = new Proxy(this.info,{
        set(target, p, value, receiver) {
          const [rowIndex,colIndex] = infoVo[p].split(',')
          tableData[rowIndex][`col${colIndex}`] = value
          return true
        }
      })
      this.info1 = new Proxy(this.info1,{
        set(target, p, value, receiver) {
          const [rowIndex,colIndex] = info1Vo[p].split(',')
          tableData1[rowIndex][`col${colIndex}`] = value
          return true
        }
      })
      this.tableClear = ['0,1','0,5','1,1','2,1','2,3','2,5','2,7','4,1','4,2','4,3','4,4','4,5','4,6','4,7','4,8','6,1','6,3','6,5','6,7','8,1','8,3','8,5','8,7']
    }

  },
  created() {
    this.initTable()
    this.initTable1()
    this.initInfo()
    const keys = Object.keys(this.info)
    keys.forEach(key=>{
      this.info[key] = '测试测试测试'
    })
    this.info1.num1 = 'num1'
    this.info1.num2 = 'num2'
    this.info1.num3 = 'num3'
    this.info1.num4 = 'num4'
    this.info1.num5 = 'num5'
    this.info1.num6 = 'num6'
    this.info1.issuer = '魏崇哲'
    this.info1.record = '2011-11-112011-11-112011-11-112011-11-112011-11-112011-11-112011-11-112011-11-112011-11-112011-11-112011-11-112011-11-112011-11-11'
    this.info1.date = this.$formatTimeYYYYMMDD(new Date())
  }
}
</script>

<style lang="scss">
.table-box{
  width: 100%;
  margin-left: 20px;
  margin-top: 62px
}
[show-border='showBorder']{
  .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
  .el-table--scrollable-y .el-table__body-wrapper {
    overflow-y:hidden;
  }
}
[show-border='noShowBorder'] {
  .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
  .el-table--scrollable-y .el-table__body-wrapper {
    overflow-y:hidden;
  }
  .el-table--border, .el-table--group {
    border: none;
  }

  .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
    border: none;
  }

  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border: none;
  }

  .el-table td.el-table__cell {
    border-bottom: 0px solid #E6E6E6;
  }

  .el-table th.el-table__cell.is-leaf {
    border-bottom: 0px solid #E6E6E6;
  }
}

</style>
